<template>
    <transition name="el-fade-in-linear">
    <div class="exitConfirmation" v-show="isShow">
        <div class="mainBox">
            <img class="closeBtn" v-if="closeShow" @click="closeBtn" src="../assets/img/closeBtn.png" alt="">
            <div class="infoBox">
                <div class="name FONT">{{text}}</div>
                <div class="tips" v-if="tipShow">退出后无法退款，请谨慎操作</div>
            </div>
            <div class="photosBtns">
                <div v-if="closeShow" class="btnBox FONT leftBtn" @click="closeBtn">
                    <i class="icons el-icon-close"></i>
                    <div>取消</div>
                </div>
                <div class="btnBox FONT leftBtn rightBtn" @click="determine">
                    <i v-if="closeShow" class="icons el-icon-check"></i>
                    <div>确定</div>
                </div>
            </div>
        </div>
    </div>
    </transition>
</template>

<script>
export default {
    props:{
        // 是否展示
        isShow:false,
        // 提示内容
        text:{
            type:String,
            default:'您已经付款了，确定要退出吗'
        },
        // tip是否显示
        tipShow:{
            type:Boolean,
            default:true,
        },
        // 取消按钮是否展示
        closeShow:{
            type:Boolean,
            default:true
        },
        // 是否显示右上角关闭
    },
    methods:{
        closeBtn(){
            this.$emit('update:isShow',false)
        },
        determine(){
            this.$emit('update:isShow',false);
            this.$emit('confirm')
        }
    }
}
</script>

<style lang="less" scoped>
.exitConfirmation{
    width: 100%;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.5);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
    .mainBox{
        width: 760px;
        height: 525px;
        margin: 0 auto;
        margin-top: 482px;
        background: linear-gradient(159.64deg, #C9C8FE 0.16%, #FFFFFF 154.29%);
        border: 3px solid;
        // border-image: linear-gradient(to bottom, #7875FC, #FCB1B7);
        border-image: linear-gradient(129.5deg, #7875FC, #F899D5, #FBB1B7) 30 30;
        position: relative;
        padding-top: 140px;
        box-sizing: border-box;
        padding-right: 20px;
        .closeBtn{
            width: 72px;
            height: 72px;
            position: absolute;
            right: -36px;
            top: -36px;
            cursor: pointer;
        }
        .infoBox{
            width: 100%;
            height: auto;
            text-align: center;
            .name{
                font-size: 48px;
                color: #7875FC;
                font-weight: bold;
            }
            .tips{
                font-size: 32px;
                color: #7A7A7A;
                margin-top: 23px;
            }
        }
        .photosBtns{
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-top: 63px;
            transform:translateX(0px);
            .leftBtn{
                margin-right: 86px;
                box-sizing: border-box;
                display: flex;
                align-items: center;
                justify-content: center;
                margin: 0;
                margin-right: 88px;
                .icons{
                    font-size: 40px;
                    font-weight: bold;
                    margin-right: 10px;
                }
            }
            .rightBtn{
                // background-color: #7875FC;
                // color: #FFFFFF;
                margin-right: 0;
            }
            .btnBox{
                width: 250px;
                height: 80px;
                text-align: center;
                line-height: 80px;
                cursor: pointer;
                font-size: 32px;
                position: relative;
                &::before{
                    content:'';
                    display: block;
                    background-image: url('../assets/img/commonBtn.png');
                    background-size: 100% 80px;
                    position: absolute;
                    width: 240px;
                    height: 80px;
                    z-index: -1;
                }
            }
        }
    }
}
</style>